<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <title>Machinaris</title>
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>

<body>

    <main>
        <div class="container py-4">

            <div class="p-5 mb-4 bg-light rounded-3">
                <div class="container-fluid py-5">
                    <h1 class="display-4">
                        <img src="{{ url_for('static', filename='error.png') }}" style= />
                        <span>Uh-oh! No Keys Found</span>
                    </h1>
                    <hr class="my-4">

                    <div>
                        {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                        {% for category, message in messages %}
                        {% if category == 'message' %}
                        <div class="alert alert-warning" role="alert">
                            {% else %}
                            <div class="alert alert-{{ category }}" role="alert">
                                {% endif %}
                                {{ message }}
                            </div>
                            {% endfor %}
                            {% endif %}
                            {% endwith %}
                        </div>

                        <p>No valid keys were found at these path(s) in-container: </p>
                        <ul>
                            {% for key_path in key_paths: %}
                            <li>{{ key_path }}</li>
                            {% endfor %}
                        </ul>
                        <p>To correct this, either add your existing key mnemonic(s)
                            into the file(s) above, where mapped to your host filesystem.<br />
                            Then <b>restart</b> the Machinaris container.</p>

                        <h3>OR</h3>

                        <p>You can generate a brand-new mnemonic key that will be written to:
                            <b>{{ key_paths[0] }}</b>
                        </p>

                        <form method="POST" id="main-form">
                            <button class="btn btn-outline-success" type="submit" id="btnFetch">Generate New
                                Key</button>
                        </form>
                    </div>
                </div>
            </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
        crossorigin="anonymous"></script>

    <script>
        $(document).ready(function () {
            $("#btnFetch").click(function () {
                $(this).prop("disabled", true);
                $(this).html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Generating...`
                );
                $("#main-form").submit();
            });
        })
    </script>

</body>

</html>